import React from 'react'
// ===================================================================== Temp
const column = new Array(12).fill('')
let row = new Array(8).fill('')
row.forEach((v,i)=> row[i]=String.fromCharCode(i+65) )

class Index extends React.Component{
	state = {
		data: new Array(96).fill('')
	}

	setBoardValue = (data) => {
		this.setState({data: [...data, ...new Array(96 - data.length).fill('')]})
	}
	
	render(){
		const { data } = this.state
		return (
			<div id='printDiv' className='bcf'>
				{/* 表格 */}
				<div key={this.state.key} className='rel mb10' >
					<div className='fv oxs scrollbar'>
						<div className='fx'>
							<div className='bor1 h30 bcf' style={{minWidth:30,width:30,position:'absolute',top:0,left:0,zIndex:3,borderColor:'#eee'}}></div>
							<div className='fx ex' style={{marginLeft: 30}}>
								{
									column.map((v,i)=>{
										return <div key={v+i} className='ex g3 tc bbor1 rbor1 tbor1 h30' style={{minWidth:100,backgroundColor:'#f7f7f7',borderColor:'#eee'}}>{i+1}</div>
									})
								}
							</div>
						</div>
						
						<div className='fx' style={{height:480}}>
							<div className='fv' style={{width:30,position:'absolute',top:30,left:0,zIndex:2}}>
								{row.map((v,i)=>{
									return <div key={v+i} className='fxmc lbor1 bbor1 rbor1' style={{height:60,width:30,backgroundColor:'#f7f7f7',borderColor:'#eee'}}>{v}</div>
								})}
							</div>
							<div className='ex fv fw ml30 f12'>
								{
									data.map((v,i)=>{
										return <div key={i} className={'tc rbor1 bbor1 rel oh'} style={{height:60,minWidth:100, borderColor:'#eee'}}>
											<div className='abs_full fv'>
												<span className='ex fxmc f11' style={{wordBreak:'break-all'}}>{v.spec_code}</span>
												<span className='ex fxmc'>{v.kind_code}</span>
												<span className='ex fxmc b'>{v.exp_no}</span>
											</div>
										</div>
									})
								}
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

export default Index